<template>
	<div>
		<div class="head_box">
			<div class="box_left">
				<div class="font-box">
					<i class="iconfont icon-shangjia"></i>
				</div>
			</div>
			<div class="box_right">
				<div class="shop-name">甘肃XXX电竞酒店</div>
				<div class="shop-address"><i class="iconfont icon-dizhi"></i>甘肃省兰州市城关区55号</div>
				<div class="shop-phone"><i class="iconfont icon-dianhua"></i>0753-7758258</div>
			</div>
		</div>
		<div class="input-box">
			<div class="input-text">消费金额</div>
			<i class="iconfont icon-renminbi"></i>
			<div class="input" contenteditable='false'>{{money}}</div>
		</div>
	</div>
	
</template>

<script>
	import './icon.css'
	import './../frozen.css'
	export default {
		name: 'head'
		, props: [
			'money'
		], data () {
			return {
				
			}
		}, methods:{
			
		}
	}
	
</script>

<style>
	
	.head_box {
		width: 100%;
		height: 110px;
		/* background: #42B983; */
		/* border-bottom: 1px solid #2C3E50; */
	}
	
	.box_left {
		width: 20%;
		padding: 25px 0;
		/* border-right: 1px solid #42B983; */
	}
	
	.box_left, .box_right, .input, .input-text {
		float: left;
	}
	
	.font-box {
		width: 60px;
		height: 60px;
		margin: 0 auto;
		background: #42B983;
		border-radius: 30px;
	}
	.icon-shangjia {
		text-align: center;
		font-size: 36px !important;
		color: #fff;
		line-height: 60px;
	}
	
	.box_right {
		width: 70%;
		padding: 30px 10px 10px;
		/* background: #42B983; */
		text-align: left;
	}
	.shop-name {
		font-size: 1.2em;
		font-weight: bold;
	}
	.shop-address, .shop-phone {
		font-size: 0.675em;
	}
	.shop-address i.icon-dizhi, .shop-phone i.icon-dianhua {
		font-size: 0.675em;
		color: #00b4f5;
		margin-right: 0.675em;
	}
	
	
	.input-box {
		width: 90%;
		height: 60px;
		margin: 5px auto;
		background: #fff;
		line-height: 60px;
		box-shadow: 0px 0px 10px #00b4f5;
	}
	
	.input-text {
		width: 20%;
		font-size: 0.85em;
		margin: 0 0.8em;
		color: #777777;
	}
	
	.input {
		width: 60%;
		height: inherit;
		text-align: right;
		font: "arial rounded mt bold";
		font-size: 0.999em;
	}
</style>
